<!DOCTYPE html>
<html>
<head>
    <title>帖子列表</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <!-- 所有的 css & js 资源 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui@2.13.0/lib/theme-chalk/index.css">
    <link rel="stylesheet" href="../../static/sa.css">
    <script src="https://unpkg.com/vue@2.6.10/dist/vue.js"></script>
    <script src="https://unpkg.com/element-ui@2.13.0/lib/index.js"></script>
    <script src="https://unpkg.com/http-vue-loader@1.4.2/src/httpVueLoader.js"></script>
    <script src="https://unpkg.com/jquery@3.4.1/dist/jquery.min.js"></script>
    <script src="https://www.layuicdn.com/layer-v3.1.1/layer.js"></script>
    <script src="../../static/sa.js"></script>
    <style type="text/css">
        /* .data-table .el-table__body-wrapper{min-height: 0px; max-height: 0px;}
        .data-table .el-table__body-wrapper{transition: all 0.3s;} */
    </style>
</head>
<body>
<div class="vue-box" style="display: none;" :style="'display: block;'">
    <div class="c-panel">
        <!-- ------------- 检索参数 ------------- -->
        <div class="c-title">检索参数</div>
        <el-form>
            <div class="c-item">
                <label class="c-label">部门名称：</label>
                <el-input v-model="p.name" placeholder="模糊查询"></el-input>
            </div>
            <div class="c-item">
                <label class="c-label">机构id：</label>
                <el-input v-model="p.mechanismId" placeholder="模糊查询"></el-input>
            </div>
            <div class="c-item" style="min-width: 10px;">
                <el-button type="primary" icon="el-icon-search" @click="f5">查询</el-button>
            </div>
            <br>

        </el-form>
        <!-- ------------- 快捷按钮 ------------- -->
        <div class="fast-btn">
            <el-button type="primary" icon="el-icon-plus" @click="add()">新增</el-button>
            <!-- <el-button type="success" icon="el-icon-view" @click="getBySelect()">查看</el-button> -->
            <el-button type="danger" icon="el-icon-delete" @click="deleteByIds()">删除</el-button>
            <el-button type="warning" icon="el-icon-download" @click="sa.exportExcel()">导出</el-button>
            <el-button type="info"  icon="el-icon-refresh"  @click="sa.f5()">重置</el-button>
        </div>
        <!-- ------------- 数据列表 ------------- -->
        <el-table class="data-table" ref="data-table" :data="dataList" size="small">
            <el-table-column type="selection" width="45px"></el-table-column>
            <el-table-column label="编号" prop="id" width="70px"> </el-table-column>
            <el-table-column label="部门名称" prop="name"></el-table-column>
            <el-table-column label="用户id" prop="userId"></el-table-column>
            <el-table-column label="联系电话" prop="contactNumber"></el-table-column>
            <el-table-column label="手机号码" prop="mobilePhone"></el-table-column>
            <el-table-column label="传真" prop="faxes"></el-table-column>
            <el-table-column label="机构id" prop="mechanismId"></el-table-column>
            <el-table-column label="创建时间" prop="createTime"></el-table-column>

            <el-table-column prop="address" label="操作" width="180px">
                <template slot-scope="s">
                    <el-button class="c-btn" type="primary" icon="el-icon-edit" @click="update(s.row)">修改</el-button>
                    <el-button class="c-btn" type="danger" icon="el-icon-delete" @click="del(s.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <!-- ------------- 分页 ------------- -->
        <div class="page-box">
            <el-pagination background
                           layout="total, prev, pager, next, sizes, jumper"
                           :current-page.sync="p.current"
                           :page-size.sync="p.size"
                           :total="total_record"
                           :page-sizes="[1, 10, 20, 30, 40, 50, 100]"
                           @current-change="f5(true)"
                           @size-change="f5(true)">
            </el-pagination>
        </div>
    </div>
</div>
<!-- <script src="data-list.js"></script> -->
<script>
    var app = new Vue({
        el: '.vue-box',
        data: {
            sa: sa,
            p: { // 查询参数
                name: '',
                mechanismId: '',
                // userId: '',
                // contactNumber: '',
                // mobilePhone: '',
                // faxes: '',

                current: 1,
                size: 10,
            },
            total_record: 0,	// 数据总数
            dataList: [] // 数据集合
        },
        methods: {
            // 数据刷新
            f5: function() {
                sa.ajax('/personnel/department/selectByPage', this.p, function(res){
                    this.dataList = res.data.records;	// 数据
                    this.total_record = res.data.total;		// 分页
                    sa.f5TableHeight();		// 刷新表格高度
                    // }.bind(this), {res: mockData});
                }.bind(this));
            },
            // 修改
            update: function(data) {
                sa.showIframe('部门修改', 'department-add.html?id=' + data.id, '420px', '280px');
            },
            // 新增
            add: function(data) {
                sa.showIframe('部门添加', 'department-add.html?id=-1', '420px', '280px');
            },
            // 删除
            del: function(data) {
                sa.confirm('是否删除，此操作不可撤销', function() {
                    sa.getajax('/personnel/department/deleteOne?id=' + data.id,null, function(res) {
                        sa.arrayDelete(app.dataList, data);
                        sa.ok('删除成功');
                        sa.f5TableHeight();		// 刷新表格高度
                    })
                });
            },
            // 批量删除
            deleteByIds: function() {
                // 获取选中元素的id列表
                let selection = this.$refs['data-table'].selection;
                let ids = sa.getArrayField(selection, 'id');
                if(selection.length == 0) {
                    return sa.msg('请至少选择一条数据')
                }
                // 提交删除
                sa.confirm('是否批量删除选中数据？此操作不可撤销', function() {
                    sa.ajax2('/SysType/deleteByIds', {ids: ids.join(',')}, function(res) {
                        sa.arrayDelete(this.dataList, selection);
                        sa.ok('删除成功');
                        sa.f5TableHeight();		// 刷新表格高度
                    }.bind(this))
                }.bind(this));
            },
        },
        created: function() {
            this.f5();
            sa.onInputEnter();		// 监听输入框的回车事件，执行查询
        }
    })
</script>

</body>
</html>
